<template>
  <PageWrapper>
    {{ mSelectedRowKeys }}
    <BasicTable @register="register">
      <template #tableTitle>
        <TableAction
          :actions="[
            {
              label: '新增',
              icon: 'ant-design:plus-outlined',
              type: 'primary',
              size: 'middle',
              auth: ['admin', 'sys:user:save'],
            },
          ]"
          :dropDownActions="[
            {
              label: '批量删除',
            },
          ]"
        >
          <template #more>
            <a-button style="margin-left: 8px">更多操作</a-button>
          </template>
        </TableAction>
      </template>
      <template #toolbar>toolbar</template>
      <!-- <template #expandedRowRender>expandedRowRender</template> -->
      <!-- <template #headerTop>headerTop</template> -->
      <template #bodyCell="{ column, record }">
        <div v-if="column.dataIndex == '__ACTION__'">
          <TableAction
            :actions="[
              {
                label: '编辑',
                auth: ['admin', 'sys:user:update'],
                onClick: handleEdit.bind(null, record),
              },
              {
                label: '删除',
                popConfirm: {
                  title: '您确定删除该条记录吗？',
                  confirm: handleDelete.bind(null, record),
                },
                auth: ['admin', 'sys:user:remove'],
              },
            ]"
            :dropDownActions="[
              {
                label: '编辑1',
              },
              {
                label: '删除2',
              },
            ]"
          />
        </div>
      </template>
      <template #form-submitBefore>submitBefore</template>
    </BasicTable>
  </PageWrapper>
</template>
<script setup lang="ts">
  import { PageWrapper } from '@/components/Page';
  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import { sysUserPage } from '@/api/sys/user';
  import { usePermission } from '@/hooks/web/usePermission';
  import { ref } from 'vue';

  const { hasPermission } = usePermission();
  const mSelectedRowKeys = ref<Array<any>>([]);
  const columns = [
    {
      title: '用户名',
      dataIndex: 'userName',
    },
    {
      title: '所属角色',
      dataIndex: 'roleIds',
      component: 'ApiSelect',
      componentProps: {
        api: '/sys/role/select',
        // api: sysRoleSelect,
      },
    },
    {
      title: '姓名',
      dataIndex: 'realName',
    },
    {
      title: '手机号',
      dataIndex: 'mobilePhone',
      // auth: 'admin',
      ifShow: hasPermission(['admin']),
    },
    {
      title: '性别',
      dataIndex: 'sex',
      component: 'ApiDict',
      componentProps: {
        code: 'sex',
      },
    },
    {
      title: '管理员类型',
      dataIndex: 'adminType',
      component: 'ApiDict',
      componentProps: {
        code: 'sys_user_admin_type',
      },
    },
    // {
    //   title: '追加text',
    //   dataIndex: 'text',
    // },
    {
      title: '操作',
      dataIndex: '__ACTION__',
    },
  ];
  const searchFormSchema: Array<any> = [
    {
      field: 'm_LIKE_userName',
      label: '用户名',
      component: 'Input',
      colProps: {
        xl: 6,
        xxl: 6,
      },
      componentProps: {
        placeholder: '请输入用户名',
      },
    },
  ];
  /**
   * 编辑事件
   * @param record
   */
  const handleEdit = (record) => {
    console.log(record);
    console.log(tableMethods);
  };
  const handleDelete = (record) => {
    console.log(record);
  };
  const [register, tableMethods] = useTable({
    columns,
    api: sysUserPage,
    showTableSetting: true,
    tableSetting: {
      fullScreen: true,
      redo: true,
      setting: true,
      size: true,
    },
    useSearchForm: searchFormSchema.length > 0, // 启用搜索表单
    formConfig: {
      // 搜索表单配置
      labelWidth: 100,
      schemas: searchFormSchema,
    },
    beforeFetch(params) {
      // 请求前处理
      return {
        roleId: 1,
        ...params,
      };
    },
    afterFetch(data) {
      // 请求后处理
      data?.forEach((item) => {
        item.text = item.userName + ' ' + item.realName;
      });
      return data;
    },
    showIndexColumn: false,
    rowSelection: {
      type: 'checkbox',
      getCheckboxProps(record) {
        return {
          disabled: record.sex == 3,
        };
      },
      onChange(selectedRowKeys) {
        mSelectedRowKeys.value = selectedRowKeys;
      },
    },
    customRow: undefined,
  });
</script>
<style lang="less" scoped></style>
